// 排期与预算
import React from 'react';
import { Form, Input, Button, Select, Radio, Space, DatePicker } from 'antd';
const { Option } = Select;
const { RangePicker } = DatePicker;

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

export default function scheduleBudget() {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log(values);
  };

  const onReset = () => {
    form.resetFields();
  };

  const onInputChange = () => {
    console.log(form);
  };

  const onFill = () => {
    form.setFieldsValue({
      note: 'Hello world!',
      gender: 'male',
    });
  };


  const submit = ()=>{
    console.log('form>>>>>>>>>',form);
  }

  //   计费方式
  function onRadioChange() {}
  return (
    <div>
      <Form {...layout} form={form} name="control-hooks" onFinish={onFinish} colon={false}>
        <Form.Item name="billing" label="计费方式" rules={[{ required: true }]}>
          <Radio.Group onChange={onRadioChange} defaultValue="a">
            <Radio.Button value="a">Hangzhou</Radio.Button>
            <Radio.Button value="b">Shanghai</Radio.Button>
            <Radio.Button value="c">Beijing</Radio.Button>
            <Radio.Button value="d">Chengdu</Radio.Button>
          </Radio.Group>
        </Form.Item>
        <Form.Item name="putDateType" label="投放日期" rules={[{ required: true }]}>
          <Radio.Group onChange={onRadioChange} defaultValue="long">
            <Radio.Button value="long">长期投放</Radio.Button>
            <Radio.Button value="timeRang">指定开始时间和结束时间</Radio.Button>
          </Radio.Group>
        </Form.Item>
        {/* 开始时间和结束时间 */}
        <Form.Item name="date" label="  ">
          <RangePicker />
        </Form.Item>
        <Form.Item name="daybudget" label="广告日预算" rules={[{ required: true }]}>
          <Input suffix="元/天" defaultValue="mysite" />
        </Form.Item>
      </Form>
      <Button onClick={submit}>提交</Button>
    </div>
  );
}
